<!-- 底部按钮组件 -->
<template>
  <view class="page-foot" @click="handleFoot">
    <view class="foot-content">
      <view class="choose-info">
        <view class="info-icon" :class="cartChoosedNum == 0 ? 'grey-icon' : ''">
          <i class="iconfont icon-a-zu139"></i>
          <view class="choose-num" v-if="cartChoosedNum > 0">{{
            cartChoosedNum
          }}</view>
        </view>

        <view>
          <view class="price-box">
            <view class="price">
              <text>￥</text>
              <text>{{ cartTotalPrice }}</text>
            </view>
            <!-- <view class="origin-price">￥{{ totalPrice }}</view> -->
          </view>
          <view class="price-box" v-if="storeTableNum">
            <view class="origin-price">桌号:{{ storeTableNum }}</view>
          </view>
        </view>
      </view>
      <view
        class="foot-btn"
        @click.stop="handleFootBtn"
        :class="{ 'can-pay': cartChoosedNum > 0 }"
        >{{ $t("cart.toPay") }}</view
      >
    </view>
  </view>
</template>

<script>
export default {
  props: {
    cartTotalPrice: {
      type: String,
      default: "",
    },
    cartSelectData: {
      type: Array,
      default: [],
    },
    cartChoosedNum: {
      type: String,
      default: "0",
    },
    storeTableNum: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {};
  },
  created() {},
  computed: {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    // 点击底部按钮
    handleFootBtn() {
      if (!this.cartSelectData.length) return;
      this.$emit("handleFootBtn");
    },
    // 点击页面底部，弹出已选sku弹框
    handleFoot() {
      if (!this.cartSelectData.length) return;
      this.$emit("handleFoot");
    },
    startPolling() {
      setTimeout(() => {
        this.intervalPollingCartData();
      }, 3000);
    },
  },
};
</script>

<style lang="less" scoped>
.page-foot {
  width: 100%;
  min-height: 112rpx;
  background: #ffffff;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1001;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .foot-content {
    width: 100%;
    height: 112rpx;
    padding: 0 24rpx 0 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .choose-info {
    flex: 1;
    display: flex;
    align-items: center;
    .info-icon {
      width: 80rpx;
      height: 80rpx;
      background: #f0250e;
      border-radius: 50%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      .iconfont {
        color: #ffffff;
        font-size: 46rpx;
      }

      .choose-num {
        width: 32rpx;
        height: 32rpx;
        background: #f84a33;
        border-radius: 50%;
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: -8rpx;
        top: -8rpx;
      }
    }
    .grey-icon {
      background-color: #8c8c8c;
    }
    .price-box {
      margin-left: 20rpx;
      display: flex;
      align-items: baseline;
      .price {
        font-size: 4.8vw;
        font-weight: 600;
        line-height: 4.27vw;
        color: #191919;
        text:first-child {
          font-size: 3.2vw;
        }
      }
      .origin-price {
        margin-left: 10rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8c8c8c;
      }
    }
  }

  .foot-btn {
    width: 224rpx;
    height: 80rpx;
    background: #8c8c8c;
    border-radius: 40rpx;
    text-align: center;
    line-height: 10.67vw;
    font-size: 4.27vw;
    font-weight: 600;
    color: #fffefe;
  }
  .can-pay {
    background: #f0250e;
  }
}
</style>
